<template>
  <div>
    <!-- 员工查询 -->
    <el-form :inline="true" size="mini" ref="searchForm" :model="staffForm" class="demo-form-inline">
         <el-form-item prop="id">
            <el-input v-model.trim="staffForm.id" placeholder="员工id"></el-input>
        </el-form-item>
        <el-form-item prop="username">
            <el-input v-model.trim="staffForm.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="name">
            <el-input v-model.trim="staffForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="staffSearch">查询</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="openAddDialog">新增</el-button>
            <el-button  @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>   、
    </el-form>
    <!-- 员工列表 -->
    <el-table height="380px" :data="staffList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="120px"> </el-table-column>
      <el-table-column prop="username" label="账号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table-column prop="salary" label="薪酬"> </el-table-column>
      <el-table-column prop="entryDate" label="入职时间"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEditDialog(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 员工分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 员工表单弹窗 -->
    <el-dialog :title="diaLogTitle" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules" style="width:400px" label-width="80px">
            <el-form-item label="账号" prop="username">
                <el-input v-model.trim="dialogForm.username" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="dialogForm.name" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="年龄" prop="age" >
                <el-input v-model.trim.number="dialogForm.age" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="电话" prop="mobile" >
                <el-input v-model.trim="dialogForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="薪酬" prop="salary">
                <el-input v-model.trim="dialogForm.salary" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职时间" prop="entryDate" >
                <el-date-picker v-model.trim="dialogForm.entryDate"  value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitData('dialogForm')">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import StaffApi from "../../api/staff";
export default {
  name: "",
  data() {
    return {
      dialogFormVisible : false,
      diaLogTitle : "",  
      page: 1,
      size: 10,
      total : 0,
      staffForm: {
        id: "",
        username: "",
        name: "",
      },
      dialogForm : {
          username : "",
          name : "",
          age : "",
          mobile : "",
          salary : "",
          entryDate : "",
      },
      staffList: [],
      rules : {
          username : [
              { required : true, message : "员工账号不能为空", trigger: "blur"}
          ],
          name : [
              { required : true, message : "员工姓名不能为空", trigger: "blur"}
          ],
          age : [
              {type : "number", message : "请输入数字", trigger: "blur"}
          ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    //初始化员工列表方法
    async init() {
      let res = await StaffApi.getStaffList(this.page, this.size, this.staffForm);
      console.log(res);
      if (res.data.flag) {
        this.staffList = res.data.data.rows;
        this.total = res.data.data.total
      }
    },
    //条数变化
    handleSizeChange(val){
        this.size= val;
        this.init()
    },
    //页码变化
    handleCurrentChange(val){
        this.page = val;
        this.init()
    },
    //员工查询
    staffSearch(){
       this.init()
    },
    //重置表单
    resetForm(formName){
        this.$nextTick(()=>{
            this.$refs[formName].resetFields();
            this.init();
        })
    },
    //员工删除
    handleDelete(id){
        this.$confirm('确认删除这条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            let res = await StaffApi.deleteStaff(id)
            if(res.data.flag){
                this.$message({type: 'success', message: '删除成功!'});
                this.init()
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //打开新增弹窗
    openAddDialog(){
        this.diaLogTitle = "员工新增"
        this.dialogFormVisible = true
        this.$nextTick(()=>{
            this.$refs["dialogForm"].resetFields()
        })  
        
    },
    //打开编辑弹窗
    openEditDialog(id){
        this.diaLogTitle = "员工编辑";
        this.dialogFormVisible = true;
        this.handleFindStaff(id)
    },
    //员工查询
    async handleFindStaff(id){
        let res = await StaffApi.findStaff(id);
        if(res.data.flag){
            Object.assign(this.dialogForm,res.data.data.rows[0])
        }
    },
    //弹窗的确定按钮方法
    submitData(formName){
        this.$refs[formName].validate( valid=>{
           if(valid){
               if(this.dialogForm.id){
                   console.log("1")
                   //编辑方法
                   this.handleEditStaff()
               }else{
                   //新增方法
                   console.log("2")
                   this.handleAddStaff()
               }
               
           }
        })
    },
    //新增方法
    async handleAddStaff(){
         let res = await StaffApi.addStaff(this.dialogForm);
         if(res.data.flag){
            this.dialogFormVisible = false;
            this.$message("新增成功");
            this.init()
        }
    },
    //编辑方法
    async handleEditStaff(){
        let res = await StaffApi.editStaff(this.dialogForm.id, this.dialogForm);
        if(res.data.flag){
            this.dialogFormVisible = false;
            this.$message("修改成功");
            this.init()
        }else{
            this.dialogFormVisible = false;
            this.$message("修改失败");
            this.init()
        }
    }
  },
  components: {},
};
</script>

<style scoped>
.el-form{
    margin-top : 20px;
}
</style>
